<template>
	<view>
		<ul class='ul'>
			<li class='pay li'>支付金额</li>
			<li class='li'>运费 <text>(全国包邮)</text> </li>
		</ul>
		<ul class='twoul'>
			<li class='twoli'>支付方式</li>
			<li class='therrli'>未支付</li>
		</ul>
		<ul class='ul'>
			<li class='pay li'>使用优惠价</li>
			<li class='li'>使用积分抵现</li>
		</ul>

		<view class="serial">
			<view class="">
				订单编号   20180205011232
			</view>
			<view class="">
				下单时间   2018-02-05 13:28
			</view>
		</view>

		<view class="bottonbox">
			<view class="">
				<text>总计:￥364</text>
				<button type="default" class="btnpay">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.ul {
		margin-top: 10px;
		height: 98px;
		line-height: 20px;
		background: #fff;
		font-size: 12px;
	}

	.li {
		padding: 0px 10px;
		height: 48px;
		line-height: 48px;
	}

	.pay {
		border-bottom: 1px solid #C3C3C3;
	}

	.twoul {
		margin-top: 10px;
		padding: 0px 10px;
		width: 375px;
		height: 50px;
		line-height: 50px;
		background: #fff;
		font-size: 12px;
		display: flex;
		box-sizing: border-box;
	}

	.twoul>li {
		flex: 1;
	}

	.therrli {
		margin-left: 100px;
	}

	.serial {
		box-sizing: border-box;
		margin-top: 10px;
		width: 375px;
		padding-left: 10px;
		height: 63px;
		background: #fff;
		line-height: 20px;
		font-size: 12px;
		padding-top: 10px;
		color: #CCCCCC;
	}

	.bottonbox {
		background: #fff;
		height: 50px;
		line-height: 50px;
		margin-top: 50px;
		font-size: 12px;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.btnpay {
		float: right;
		width: 144px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(117, 117, 117, 1);
		text-align: center;
	}
</style>
